<template>
  <view class="statistics-container">
    <view class="header">
      <text class="title">数据统计</text>
    </view>
    
    <view class="stats-grid">
      <view class="stat-card" @click="navigateTo('overview')">
        <view class="card-icon overview-icon">📊</view>
        <text class="card-title">数据概览</text>
        <text class="card-desc">查看整体运营数据</text>
      </view>
      
      <view class="stat-card" @click="navigateTo('member')">
        <view class="card-icon member-icon">👥</view>
        <text class="card-title">会员统计</text>
        <text class="card-desc">分析会员增长趋势</text>
      </view>
      
      <view class="stat-card" @click="navigateTo('course')">
        <view class="card-icon course-icon">📚</view>
        <text class="card-title">课程统计</text>
        <text class="card-desc">查看课程参与情况</text>
      </view>
      
      <view class="stat-card" @click="navigateTo('coach')">
        <view class="card-icon coach-icon">👨‍🏫</view>
        <text class="card-title">教练统计</text>
        <text class="card-desc">分析教练工作数据</text>
      </view>
      
      <view class="stat-card" @click="navigateTo('revenue')">
        <view class="card-icon revenue-icon">💰</view>
        <text class="card-title">营收统计</text>
        <text class="card-desc">查看收入支出情况</text>
      </view>
      
      <view class="stat-card" @click="navigateTo('booking')">
        <view class="card-icon booking-icon">📅</view>
        <text class="card-title">预约统计</text>
        <text class="card-desc">分析预约转化率</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'

// 导航到指定页面
const navigateTo = (page: string) => {
  uni.navigateTo({
    url: `/pages/statistics/${page}/index`
  })
}

onMounted(() => {
  // 页面加载完成后可以在这里做一些初始化操作
})
</script>

<style scoped>
.statistics-container {
  background-color: #ffffff;
  min-height: 100vh;
  padding: 20rpx;
}

.header {
  text-align: center;
  margin-bottom: 40rpx;
  padding-top: 20rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30rpx;
}

.stat-card {
  background-color: #f8f8f8;
  border-radius: 16rpx;
  padding: 30rpx 20rpx;
  text-align: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-4rpx);
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
}

.card-icon {
  font-size: 48rpx;
  margin-bottom: 16rpx;
}

.card-title {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 8rpx;
}

.card-desc {
  font-size: 20rpx;
  color: #999999;
}

/* 不同卡片的图标颜色 */
.overview-icon {
  color: #4B0082;
}

.member-icon {
  color: #ff6b6b;
}

.course-icon {
  color: #4ecdc4;
}

.coach-icon {
  color: #45b7d1;
}

.revenue-icon {
  color: #f9ca24;
}

.booking-icon {
  color: #6c5ce7;
}
</style>